<template>
	<div id='push-authen' @touchstart='stopScroll($event)'>
		<div class='content'>
			<div class='content-top' >
				<span @touchstart.stop='closeAuthen'>取消</span>
				实名认证
			</div>
			<p class='notice'>
				海关要求购买跨境商品需提供实名信息
			</p>
			<div class='form-name'>
				<el-row class='form-name-row'>
					<el-col :span='8'>
						真实姓名
					</el-col>
					<el-col :span='16' >
						<input 
							type="text" 
							v-model='name'
							@touchstart.stop='stopScroll1($event)' 
							placeholder="请填写您的真实姓名" 
							class='input'>
					</el-col>
				</el-row>
				<el-row class='form-name-row'>
					<el-col :span='8'>
						身份证号
					</el-col>
					<el-col :span='16' >
						<input 
							@touchstart.stop='stopScroll1($event)' 
							v-model='idCard' 
							type="text" 
							placeholder="请填写匹配的身份证号" 
							class='input'>
					</el-col>
				</el-row>
			</div>
			<div class='submit-btn' @touchstart.stop='submitAuthen'>
				提交
			</div>
		</div>
	</div>
</template>

<script>
	import {_layer} from '@/comm.js';
	export default {
		data(){
			return ({
				idCard:'',
				name:''
			});
		},
		mounted(){
			this.winHei=$('body').get(0).offsetHeight;
		},
		methods:{
			//阻止遮罩层下面的滚动
			stopScroll(e){
				 e = e || window.event;
			     e.preventDefault();
			},
			//阻止冒泡到上面这个函数
			stopScroll1(ev){
			},
			//关闭实名认证弹框
			closeAuthen(){
				this.$emit('closeAuthen');
			},
			//提交信息到父组件
			submitAuthen(){
				if(!this.idCard.trim()||!this.name.trim()){
					_layer('请填写信息后提交');
					return ;
				}
				this.$emit('submitAuthen',this.idCard,this.name);
			}
		}
	}	
</script>

<style scoped>
	#push-authen{
		position: fixed;
		top:0;
		right: 0;
		bottom:0;
		left:0;
		z-index:4;
		transition: background .5s;
		-moz-transition: background .5s; 
		-webkit-transition: background .5s; 
		-o-transition: background .5s;
	}
	.content{
		position: fixed;
		z-index:2;
		top:0;
		right: 0;
		bottom: 0;
		left:0;
		/*width: 100%;*/
		background: white;
	}
	.content-top{
		padding:20px 0;
		font-size:16px;
		text-align: center;
		font-weight: 600;
		position: relative;
	}
	.content-top span:first-of-type{
		position: absolute;
		left: 1rem;
		color:#999;
	}
	.notice{
		padding: 18px 1rem;
		background: #f7f7f7;
		color:#999;
	}
	.form-name{
		padding:0 1rem; 
	}
	.form-name-row{
		padding: 25px 0;
		border-bottom:1px solid #eee;
		font-size:16px;
		font-weight: 600;
	}
	.input{
		border: none;
		outline: none;
	}
	.submit-btn{
		position: absolute;
		bottom: 3.5rem;
		left: 12.5%;
		width: 75%;
		height:40px;
		font-size: 15px;
		line-height: 40px;
		text-align: center;
		background: -o-linear-gradient(left,#fa6913,#fa281d); 
        background: -moz-linear-gradient(left,#fa6913,#fa281d); 
        background: linear-gradient(left,#fa6913,#fa281d); 
		background: -webkit-linear-gradient(left,#fa6913,#fa281d);
		border-radius: 42px;
		color:white;
	}
</style>